<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div>
        <h1>1</h1>
    </div>
    <h2>内容</h2>
    <script>
        // 在一个标签内追加元素
        $('div').append('<h1>h1</h1>')
        $('div').append('<h1>h1</h1><h1>h111</h1>')
        $('div').append($('h1'))

        //将标签追加到另一个标签内
        $('<h1>h1</h1>').appendTo('div');

        //在一个标签内的开始位置插入另一个标签
        $('div').prepend('<h2>h2222</h2>');

        // 将标签插入到另一个标签内上午最前面
        $('<h2>h222</h2>').prependTo('div');

        // 在一个标签内之后追加元素
        $('div').after('<h2>h2222</h2>')
        // 在一个标签前面追加元素
        $('div').before('<h2>h222</h2>')



        // 将一个元素放在另一个元素的后面
        $('div').insertAfter('h2')
        $('h1').insertBefore(h2)


    </script>

</body>

</html>